<template>
	<PageLayout>
		<view class="index-every">
			<view class="index-header">
				<Card />
			</view>
			<scroll-view  scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
				@scrolltolower="lower" @scroll="scroll">
				<view class="grid-container">
					<view class="index-scroll-box">
						<view class="index-box" :style="{backgroundImage: `url(${boxlist[0].img})`}"></view>
						<text>{{ boxlist[0].text }}</text>
					</view>
					<view class="index-scroll-box">
						<view class="index-box" :style="{backgroundImage: `url(${boxlist[1].img})`}"></view>
						<text>{{ boxlist[1].text }}</text>
					</view>
					<view class="index-scroll-box" @click="WallpaperStore.iswallpapercarousel=true">
						<view class="index-box" :style="{backgroundImage: `url(${boxlist[2].img})`}"></view>
						<text>{{ boxlist[2].text }}</text>
					</view>
					<view class="index-scroll-box">
						<view class="index-box" :style="{backgroundImage: `url(${boxlist[3].img})`}"></view>
						<text>{{ boxlist[3].text }}</text>
					</view>
					<view class="index-scroll-box">
						<view class="index-box" :style="{backgroundImage: `url(${boxlist[4].img})`}"></view>
						<text>{{ boxlist[4].text }}</text>
					</view>
					<view class="index-scroll-box">
						<view class="index-box" :style="{backgroundImage: `url(${boxlist[5].img})`}"></view>
						<text>{{ boxlist[5].text }}</text>
					</view>
					<view class="index-scroll-box">
						<view class="index-box" :style="{backgroundImage: `url(${boxlist[6].img})`}"></view>
						<text>{{ boxlist[6].text }}</text>
					</view>
				</view>
			</scroll-view>

		</view>
		<wallpapercarousel v-show="WallpaperStore.iswallpapercarousel"/>
	</PageLayout>
	
</template>

<script setup>
	import wallpapercarousel from '../../component/wallpapercarousel/wallpapercarousel.vue';
	import Card from '../../component/index/card.vue';
	import {
		ref,
		onMounted
	} from 'vue';
	import { useWallpaperStore } from '../../common/index/Wallpaper';
	const WallpaperStore=useWallpaperStore();

	const boxlist = [{
			text: "音乐播放",
			img: "/static/box/1.png"
		},
		{
			text: "文件传递",
			img: "/static/box/2.png"
		},
		{
			text: "壁纸轮播",
			img: "/static/box/3.png",
		},
		{
			text: "图片提取文字",
			img: "/static/box/4.png"
		},
		{
			text: "图片格式转换",
			img: "/static/box/5.png"
		},
		{
			text: "应用设置快捷方式",
			img: "/static/box/6.png"
		},
		{
			text: "文件批处理",
			img: "/static/box/7.png"
		}
	];


	onMounted(() => {
		//隐藏官方的tabBar
		uni.hideTabBar()
	})
</script>

<style lang="scss">
	@import '/common/common.scss';

	.index-every {
		width: 100vw;
		height: calc(100vh - 70px);
		background-color: var(--bg-color);

		.index-header {
			width: 100%;
			height: 200px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.scroll-Y {
			width: 100%;
			height: 400px;

			// background-color: #46f5db;
			.grid-container {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				// gap: 10rpx;

				box-sizing: border-box;

				.index-scroll-box {
					width: calc((100% - 150rpx) / 3);
					height: 120px;
					margin-left: 5%;
					// margin-top: 8px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					color: #fff;

					text {
						margin-top: 5px;
						font-size: 12px;
					}

					.index-box {
						width: 100%;
						height: 90px;

						border-radius: 10px;
						background-size: cover;
						background-repeat: no-repeat;
						background-position: center;
						/* 基本阴影 - 右侧和底部 */
						// box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
						/* 环绕阴影 - 四周都有阴影 */
						box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
						/* 内阴影 - 元素内部有凹陷效果 */
						// box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);

						/* 扩展阴影 - 阴影比元素本身更大 */
						// box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.1);
					}
				}

			}
		}
	}

	.uni-tabbar {
		display: none !important;
	}

	uni-tabbar {
		display: none !important;
	}
</style>